<template>
    <div :style="{height:height,width:width}">
        <h2>
            折线图-人员变化 <a href="javacript:;" @click.prevent="change_chart_0">2020</a
        ><a href="javascript:;" @click.prevent="change_chart_1">2021</a>
        </h2>
        <div :id="id" :class="className" :style="{height:cHeight,width:width}" />
    </div>
  
</template>

<script>
import echarts from 'echarts'
import resize from '../mixins/resize'

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        id: {
            type: String,
            default: 'line-chart'
        },
        width: {
            type: String,
            default: '200px'
        },
        height: {
            type: String,
            default: '200px'
        }
    },

    data() {
        return {
            chart: null,
            cHeight:'85%'
        }
    },
    mounted() {
        this.initChart()
    },
    methods:{
        initChart(){

            const yearData = [
                {
                    year:'2020',
                    data: [
                        // 两个数组是因为有两条线
                        [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
                        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
                    ]
                },
                {
                    year:"2021",
                    data: [
                        // 两个数组是因为有两条线
                        [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
                        [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
                    ]
                }
            ]

            const myChart =  echarts.init(document.getElementById(this.id));

            const option = {
                // 通过这个color修改两条线的颜色
                color: ["#00f2f1", "#ed3f35"],
                tooltip: {
                    trigger: "axis"
                },
                legend: {
                    // 如果series 对象有name 值，则 legend可以不用写data
                    // 修改图例组件 文字颜色
                    textStyle: {
                        color: "#4c9bfd"
                    },
                    // 这个10% 必须加引号
                    right: "10%"
                },
                grid: {
                    top: "20%",
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    show: true, // 显示边框
                    borderColor: "#012f4a", // 边框颜色
                    containLabel: true // 包含刻度文字在内
                },

                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [
                        "1月",
                        "2月",
                        "3月",
                        "4月",
                        "5月",
                        "6月",
                        "7月",
                        "8月",
                        "9月",
                        "10月",
                        "11月",
                        "12月"
                    ],
                    axisTick: {
                        show: false // 去除刻度线
                    },
                    axisLabel: {
                        color: "#4c9bfd" // 文本颜色
                    },
                    axisLine: {
                        show: false // 去除轴线
                    }
                },
                yAxis: {
                    type: "value",
                    axisTick: {
                        show: false // 去除刻度线
                    },
                    axisLabel: {
                        color: "#4c9bfd" // 文本颜色
                    },
                    axisLine: {
                        show: false // 去除轴线
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#012f4a" // 分割线颜色
                        }
                    }
                },
                series: [
                    {
                        name: "新增粉丝",
                        type: "line",
                        // true 可以让我们的折线显示带有弧度
                        smooth: true,
                        data: yearData[0].data[0]
                    },
                    {
                        name: "新增游客",
                        type: "line",
                        smooth: true,
                        data: yearData[0].data[1]
                    }
                ]
            };

            // 3. 把配置给实例对象
            myChart.setOption(option);

           // 4. 让图表跟随屏幕自动的去适应
            window.addEventListener("resize", function() {
                myChart.resize();
            });
           
        },

        change_chart_1(){
            console.log(1)
        },

        change_chart_2(){
            console.log(2)
        }
    }



}

</script>

<style lang="scss" scoped>
    h2 {
      height: 0.8rem;
      color: #fff;
      line-height: 0.8rem;
      text-align: center;
      font-size: 0.8rem;
      font-weight: 400;
      a {
        color: #fff;
        text-decoration: none;
        margin: 0 0.125rem;
      }
    }
</style>